<template>
  <div
    class="custom-container"
    :style="{ background: '#fff', padding: '24px', margin: 0 }"
  >
 
    <!-- <a-button @click="add">新增检查人员</a-button> -->
    <a-input-search
      class="search"
      placeholder="搜索用户名|姓名|手机号"
      @search="search"
      v-model="keyword"
      enterButton
    />
    <a-icon type="plus-circle" theme="twoTone" style="font-size: 27px; margin-left:930px"  @click="add"/>
    <!-- <a-icon type="file-excel" theme="twoTone"  class="all-data" @click="exportData()" /> -->
      <a-icon type="file-excel" theme="twoTone" two-tone-color="#52c41a" class="all-data" @click="exportData()" />
    <a-table
      style=" margin: 24px 0"
      :columns="columns"
      :dataSource="staffList"
      :loading="loading"
      :pagination="pagination"
      rowkey="rowkey"
    >
      <template slot="locked" slot-scope="text, item">
        <div v-if="item.locked == 0">
          <a-tag color="blue">未锁定</a-tag>
        </div>
        <div v-if="item.locked == 1">
          <a-tag color="red">已锁定</a-tag>
        </div>
      </template>
      <span slot="action" slot-scope="text, item">
        <a-icon type="edit" theme="twoTone" 
        style="font-size:22px;margin-right:10px"
        @click="update(item)"/>
        <!-- <a-button type="primary" size="small" @click="update(item)">
          编辑
        </a-button> -->
        <a-icon type="lock" theme="twoTone" two-tone-color="#eb2f96"
        style="font-size:22px"
          v-if="item.locked == 0"
          @click="confirmDelete(item.id)"/>
        <!-- <a-button
          size="small"
          v-if="item.locked == 0"
          type="danger"
          @click="confirmDelete(item.id)"
        >
          锁定
        </a-button> -->
        <a-icon type="unlock" theme="twoTone" two-tone-color="#52c41a"
        style="font-size:22px"
        @click="confirmDelete(item.id)"
        v-if="item.locked == 1"/>
        <!-- <a-button
          style="background-color:#87d068;color:white"
          @click="confirmDelete(item.id)"
          v-if="item.locked == 1"
          size="small"
        >
          解除锁定
        </a-button> -->
      </span>
    </a-table>
    <a-modal
      v-model="formVisible"
      :title="formTitle"
      @ok="submit"
      okText="确定"
      cancelText="取消"
    >
      <a-form :form="form" @submit="submit">
        <a-form-item
          label="用户名"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-input
            v-decorator="[
              'username',
              {
                rules: [
                  { required: true, message: '用户名不能为空' },
                  { whitespace: true, message: '用户名不能为空' }
                ]
              }
            ]"
          />
        </a-form-item>
        <a-form-item
          label="密码"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-input
            v-decorator="[
              'password',
              {
                rules: [
                  { required: true, message: '密码不能为空' },
                  { whitespace: true, message: '密码不能为空' },
                  { min: 6, message: '密码至少6位;' }
                ]
              }
            ]"
          />
        </a-form-item>
        <a-form-item
          label="身份证号码"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-input v-decorator="['idCard']" />
        </a-form-item>
        <a-form-item
          label="真实姓名"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-input v-decorator="['realName']" />
        </a-form-item>
        <a-form-item
          label="手机号"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-input
            v-decorator="[
              'phone',
              { rules: [{ whitespace: true, message: '正确输入手机号' }] }
            ]"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
// import xlsx from 'xlsx'
const columns = [
  {
    title: '用户名',
    dataIndex: 'username',
    width:140,
    ellipsis: true
  },
  {
    title: '真实姓名',
    dataIndex: 'realName',
    width:160
  },
  {
    title: '身份证号码',
    dataIndex: 'idCard',
    ellipsis: true
  },
  
  {
    title: '手机号',
    dataIndex: 'phone'
  },
  {
    title: '状态',
    scopedSlots: { customRender: 'locked' }
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
];

export default {
  data () {
    return {
      columns,
      staffList: [],
      page: 0,
      size: 10,
      pagination: {},
      keyword: '',
      loading: false,
      formVisible: false,
      formTitle: '',
      form: this.$form.createForm(this),
      preAdd: false,
      preUpdate: false,
      preUpdateId: '',
      staff: ''
    };
  },
  created () {
    const arr = ['username', 'password', 'phone', 'realName', 'idCard'];
    arr.forEach(element => {
      this.form.getFieldDecorator(element);
      //  console.log(element)
    });
    this.$data.staffList = [];
    // this.$request.get("/handleSite").then(res => {
    //   this.$data.siteList = res.data.data;
    // });
    this.load();
  },
  methods: {
    exportData () {
      let token = localStorage.getItem('ktoken');
      fetch(
        'https://dudu.gaoxiao.love/healthqrcode/website/website/inspector/export',
        {
          method: 'GET',
          headers: new Headers({
            Authorization: token
          })
        }
      )
        .then(res => res.blob())
        .then(data => {
          const blobUrl = window.URL.createObjectURL(data);
          const a = document.createElement('a');
          a.download = '检查人员信息列表' + '.xlsx';
          a.href = blobUrl;
          a.click();
          setShareVisible(false);
        });
    },
    load () {
      this.$data.loading = true;
      const page = this.$data.page;
      const size = this.$data.size;
      let parma = {
        pageNumber: page,
        pageSize: size,
        keyword: this.$data.keyword
      };
      this.$axios.staffList(parma).then(res => {
        if (res.resultCode == 0) {
          const data = res.data;
          console.log(res.data)
          const pagination = {
            total: data.totalElements,
            onChange: this.pageChange
          };
          this.$data.pagination = pagination;
          this.$data.staffList = data.content;
        } else {
          this.$message.error('获取数据失败', 1.5);
        }

        this.$data.loading = false;
      });
    },

    pageChange (page) {
      this.$data.page = page - 1;
      this.load();
    },

    search () {
      this.$data.page = 0;
      this.load();
    },

    update (item) {
      // console.log(item)
      this.$data.preUpdateId = item.id;
      this.$data.preAdd = false;
      this.$data.preUpdate = true;
      (this.$data.formTitle = '更新检查人员信息'), (item.password = '******');
      this.$data.form.setFieldsValue(item);
      this.$data.formVisible = true;
    },

    add () {
      this.$data.preUpdate = false;
      this.$data.preAdd = true;
      this.$data.formTitle = '添加检查人员';
      this.$data.form.resetFields();
      this.$data.formVisible = true;
    },

    submit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          if (this.$data.preAdd) {
            console.log(values);

            this.$axios.addStaff(values).then(res => {
              if (res.resultCode == 0) {
                this.$message.info('添加成功', 1.5);
                this.$data.page = 0;
                (this.$data.formVisible = false),
                (this.$data.preUpdate = false);
                this.load();
              } else {
                this.$message.error(res.errorMsg + '添加检查人员失败', 1.5);
              }
            });
          } else if (this.$data.preUpdate) {
            console.log(values);
            values['id'] = this.$data.preUpdateId;
            this.$axios.updateStaff(values).then(res => {
              if (res.resultCode == 0) {
                this.$message.info('修改成功', 1.5);
                this.$data.page = 0;
                (this.$data.formVisible = false),
                (this.$data.preUpdate = false);
                this.load();
              } else {
                this.$message.error(res.errorMsg + '修改检查人员失败', 1.5);
              }
            });
          }
        }
      });
    },

    confirmDelete (userId) {
      let _this = this;
      this.$confirm({
        title: '确定执行该检查人员吗?',
        content: '不可撤消操作，该操作检查人员会影响其保存在系统中的信息',
        okText: '确定',
        cancelText: '取消',
        onOk () {
          let parma = {
            id: userId
          };

          _this.$axios.deleteStaff(parma).then(res => {
            if (res.resultCode == 0) {
              _this.$message.info('修改检查人员状态成功', 1.5);
              _this.load();
            } else {
              _this.$message.error('锁定失败', 1.5);
            }
          });
        }
      });
    },

    rowkey (record) {
      return record.id;
    }
  }
};
</script>

<style scoped>
.search {
  position: relative;
  top: 1px;
  margin-left: 8px;
  width: 300px !important;
}
.all-data {
  float: right;
  font-size: 27px;
  margin-right: 10px;
}
.all-select {
  width: 240px;
  margin-left: 100px;
}
</style>
